<template>
  <div class="plan-list">
    <div class="plan-list-title">
      <span class="plan-list-title-item">
        <el-tag size="mini" effect="dark" type="success">文件</el-tag>
      </span>
      <span class="plan-list-title-item">
        <el-tag size="mini" effect="dark" type="warning">文件</el-tag>
      </span>
      <span class="plan-list-title-item">
        <el-tag size="mini" effect="dark" type="danger">文件</el-tag>
      </span>
      <span class="plan-list-title-item">
        <el-tag size="mini" effect="dark" type="error">文件</el-tag>
      </span>
      <span class="plan-list-title-item">
        <el-tag size="mini" effect="dark" type="info">文件</el-tag>
      </span>
      <span class="plan-list-title-item">
        <el-tag size="mini" effect="dark" type="success">文件</el-tag>
      </span>
    </div>
    <div class="plan-list-main" v-infinite-scroll="load" infinite-scroll-distance="5">
      <div class="plan-list-item-container" v-for="i in count" @click="goPlanInfo">
        <mu-paper class="plan-list-main-item" :z-depth="1">
          <div class="plan-item-tile">
            测试计划的发射
          </div>
          <div class="plan-item-desc">
            <span class="plan-person" v-for="i in 8">
              <mu-avatar :size="30">
                <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
              </mu-avatar>
            </span>
          </div>
          <div class="plan-item-bottom">
            2021/12/12-2022/12/12
          </div>
        </mu-paper>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import CloseNavigation from '@/components/CloseNavigation.vue';
import TaskInfo from '@/views/todo/TaskInfo.vue';
import TodoNavigationNew from '@/components/taskandtodo/TodoNavigationNew.vue';


@Component({
  components: {
    CloseNavigation,
    TaskInfo,
    TodoNavigationNew,
  },
})
export default class Home extends Vue {
  // @Getter @Action 在vuex-class 包内
  // 这里使用 ！ 是说明 属性不会为undefined 否则需要进行初始化操作
  // @Getter
  // public getToken !: string;
  //
  // @Action('setToken')
  // public setToken !: Function;
  private calendarValue: any = new Date();

  private count:number = 0;

  public load():void {
    this.count++;
  }

  public goPlanInfo(): void {
    this.$router.push({name: 'plan-info'}).catch((err: Error) => err);
  }
}
</script>
<style lang="scss">
  .plan-list {
    float: left;
    height: 100%;
    width: 100%;
    .plan-list-title {
      border-bottom: 1px solid #e5e2e2;
      height: 60px;
      line-height: 60px;
      padding: 0 10px;
      .plan-list-title-item {
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .plan-list-main {
      //border: 1px solid red;
      height: 100%;
      overflow-y: auto;
      .plan-list-item-container {
        float: left;
        display: inline-block;
        .plan-list-main-item {
          display: inline-block;
          width: 170px;
          height: 170px;
          margin: 15px;
          background-color: #bbc4cc;
          cursor: pointer;
          padding: 5px;

          .plan-item-tile {
            height: 30px;
            line-height: 30px;
            color: #fff;
            font-size: 16px;
          }
          .plan-item-desc {
            height: 105px;
            padding: 5px 0;
            text-align: center;

            .plan-person {
              display: inline-block;
              //float: left;
              margin: 0 8px 8px 0;
              .mu-avatar img {
                box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)
              }

              .mu-avatar img:hover {
                box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
              }
            }
          }
          .plan-item-bottom {
            height: 30px;
            border-top: 1px solid rgb(255, 255, 255);
            text-align: center;
            font-size: 12px;
            line-height: 26px;
            color: #ffffff;
          }
        }
        .plan-list-main-item:hover {
          box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
        }
      }
    }
  }
</style>
